<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Axios测试</title>
		<script src="../js/axios.js"></script>
	</head>
	<body>
		<h1>Axios测试案例-1</h1>
		<script>
			/* 
				1.可以编辑Axios 发送ajax请求
				2.不同的服务器之间发送ajax请求时会有"跨域"问题
				3.解决跨域问题 通过注解搞定. @CrossOrigin  
			 */
			var url = "http://localhost:8080/hello"
			axios.get(url).then(function(promise){
				console.log(promise.data)
			})
				 
			
				 
			/**
			 * var 关键字 没有作用域的概念!!!!
			 * let 相当于var 有作用域 更加安全.
			 * const 定义常量的
			 * 关于axios数据返回值对象的说明:
			 * 		axios为了接收后端服务器数据,利用promise对象
			 * 		封装参数
			 */
			let url1 = "http://localhost:8080/axios/getUserById?id=100"	
			axios.get(url1)
				 .then(function(promise){
					 console.log(promise.data)
				 })
			
			/**
			 * 1.get请求 对象传参
			 * 2.语法说明:
			 * 		关键字: {params : 对象信息}
			 */
			let user2 = {name:"tomcat",age:100}
			let url2 = "http://localhost:8080/axios/getUserByNA"
			axios.get(url2,{params: user2})
				 .then(function(promise){
					 console.log(promise)
					 if(promise.status === 200){
						 console.log("业务执行成功")
						 console.log(promise.data)
					 }else{
						 console.log("业务执行有误")
					 }
				 })
				
				 
				/**
				 * 需求: 利用restFul的风格实现前后端交互.
				 * URL:  http://localhost:8080/axios/findUserByNS/tomcat/男
				 * 难点:
				 * 		1.tomcat/男直接写死在url地址中. 后期扩展不方便
				 * 模版字符串写法:ES6引入的新功能
				 * 语法:
				 * 		1. 使用反引号  ``
				 * 		2. 作用:  1.可以保证字符串的格式
				 * 				  2.可以动态获取变量的值
				 */ 
				let user3 = {name: "tomcat", sex: "男"}
				let url3 = `http://localhost:8080/axios/findUserByNS/${user3.name}/${user3.sex}`
				let html = `<div>
								<p>AAA</p>
								<p>BBB</p>  
							</div>
							`
				axios.get(url3)
					 .then(function(promise){
						 console.log(promise.data)
					 })
		</script>
	</body>
</html>





